<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, DOT parser prototype</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset/reset-min.css" />

<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/util/Anim.js"></script>
<script type="text/javascript" src="../../js/util/DD.js"></script>
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>
<script type="text/javascript" src="../../js/Layout.js"></script>

<script type='text/javascript' src='DotToJson.js'></script>

<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />

<style>

div.WireIt-Terminal {
	background-image: none;
	width: 0px;
	height: 0px;
}

div.WireIt-Container {
	width: 90px
}

</style>

<script>


YAHOO.util.Event.onDOMReady(function() {
	
	YAHOO.util.Connect.asyncRequest('GET', 'sample.dot', {
		success: function(o) {
			var graph = DotParser.parse(o.responseText);
			run(graph);
		}
	})
	
});


run = function(graph) {
		
	layer = new WireIt.Layer({});
	for(var i = 0 ; i < graph.nodes.length ; i++) {
		layer.addContainer({
			terminals: [ { offsetPosition: {bottom: 34, left: 25}, editable: false }],
			title: graph.nodes[i],
			position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ],
			close: false
		});
	}
	for(var i = 0 ; i < graph.edges.length ; i++) {
		var edge = graph.edges[i];
		layer.addWire({
			src: {moduleId: graph.nodes.indexOf(edge.node1), terminalId: 0},
			tgt: {moduleId: graph.nodes.indexOf(edge.node2), terminalId: 0},
			drawingMethod: "straight"
		});
	}	
	
	layer.startDynamicLayout();
};


</script>

 </head>
 <body>
 </body>
</html>